<template>
	<view>
		<view class="foot-top">银行卡</view>
		<view class="content">
			<view class="title">添加银行卡</view>
			
			<view class="choose">
				<view class="title">选择银行</view>
				<view class="boxes">
					<view class="box" v-for="(item,index) in cards" :key="index" @tap="changeCard(index)">
						<!-- <view @tap="addCardByChoice(index)"> -->
							<view class="cardIcon" :style="{'background-image':'url('+item.iconURL+')'}"></view>
							<view class="cardName">{{item.name}}</view>
							<view class='cardC' :class="'choosed' + index" hidden></view>
							<view class='cardU' :class="'unChoosed' + index" ></view>
						<!-- </view> -->
					</view>
				</view>
			</view>
			
			<view class="note">——添加银行卡号——</view>
			
			<view class="keyIn">
				<view class="title">输入卡号</view>
				<input v-model="cardAccount" type="text" class="text" @tap="cardAccount = ''" placeholder="请输入银行卡号">
				<view class="warning" v-if="cardAccount.length != 19">请输入正确的银行卡号!!</view>
				<view class="submit" @tap="addCardByInput">添加</view>
			</view>
		</view>
	</view>
</template>

<script module="wxs" lang="wxs" src="../../wxs/index.wxs"></script>
<script>
const http = require('../../utils/http.js')
const util = require('../../utils/util')
export default{
	data() {
	  return {			
			userId: 0,
			
			cardAccount: '',
			
			activeCard: -1,
			
			cards:[
				{
					name: "建设银行卡",
					iconURL: "../../static/images/ChinaConstructionBank.png",
				},
				{
					name: "农业银行卡",
					iconURL: "../../static/images/AgriculturalBankOfChina.png",
				},
				{
					name: "工商银行卡",
					iconURL: "../../static/images/IndustrialAndCommercialBank.png",
				},
				{
					name: "中国银行卡",
					backgroundColor: "rgba(198, 14, 17, 1.0)",
					iconURL: "../../static/images/BankOfChina.png",
					num: "**** 5995",
				},
				{
					name: "招商银行卡",
					backgroundColor: "rgba(198, 24, 39, 1.0)",
					iconURL: "../../static/images/ChinaMerchantsBank.png",
					num: "**** 5995",
				}
			]
	  }
	},
	computed: {
		cardHeight(){
			var height = 10;
      return `${height}vh`;
		}
	},
  onLoad: function(options) {
		if (options.userId) {
			this.userId = options.userId;
		}
  },
  onShow: function() {
  },
	methods: {
		addCardByInput(){
			if ( this.cardAccount.length == 19 && this.activeCard != -1 ) {
				console.log("addCard");
				const params = {
					url: '/mall4cloud_user/m/userCards/bind',
					method: 'POST',
					data: {
						userId: this.userId,
						cardNum: this.cardAccount,
						status: 1,
						bank: this.cards[this.activeCard].name.substring(0,2)
					}
				}
				http.request(params);
				setTimeout(this.toCreditCardPage, 100);
			} else if ( this.activeCard == -1 ) {
				console.log(111111);
				uni.showToast({
					title: '未选择银行卡',
					duration: 2000,
					icon: 'none'
				})
			}
		},
		changeCard(index){
			var choosed = ".choosed" + index;
			var unChoosed = ".unChoosed" + index;
			
			var hidden = [
				document.querySelector('.choosed0'),
				document.querySelector('.choosed1'),
				document.querySelector('.choosed2'),
				document.querySelector('.choosed3'),
				document.querySelector('.choosed4')
			];
			var show = [
				document.querySelector('.unChoosed0'),
				document.querySelector('.unChoosed1'),
				document.querySelector('.unChoosed2'),
				document.querySelector('.unChoosed3'),
				document.querySelector('.unChoosed4')
			];
			
			for (var i = 0; i < hidden.length; i++) {
				if (hidden[i].hasAttribute('hidden')) {
				} else {
					hidden[i].setAttribute('hidden', '');
				}
			}
			
			for (var i = 0; i < show.length; i++) {
				if (show[i].hasAttribute('hidden')) {
					show[i].removeAttribute('hidden');
				}
			}
			
			if (document.querySelector(choosed).hasAttribute('hidden')) {
				document.querySelector(choosed).removeAttribute('hidden');
			}
			
			if (!document.querySelector(unChoosed).hasAttribute('hidden')) {
				document.querySelector(unChoosed).setAttribute('hidden', '');
			}
			
			this.activeCard = index;
		},
		toCreditCardPage() {
		  uni.navigateTo({
		    // url: '/pages/creditCard/creditCard'
		    url: '/pages/creditCard/creditCard?userId=' + this.userId
		  })
		}
	}
}
</script>

<style>
@import './addCard.css';
</style>